<template>
    <div class="paymentDetail" id="paymentDetail">
        <p style="font-size: 17px;height: 48px;line-height: 48px;">学生信息</p>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
            <el-table-column prop="notice_number" label="学号" width="180" align="center"></el-table-column>
            <el-table-column prop="courtyard_department" label="院系" align="center"></el-table-column>
            <el-table-column prop="professional" label="专业" align="center"></el-table-column>
            <!--<el-table-column prop="phone" label="手机号" align="center"></el-table-column>-->
            <el-table-column prop="card_number" label="一卡通号" align="center"></el-table-column>
          <el-table-column prop="other_phone" label="一卡通手机号" align="center"></el-table-column>
            <el-table-column prop="payTypeInfo" label="支付方式" align="center"></el-table-column>

            <el-table-column prop="is_only" label="线上/线下" align="center">
                <template slot-scope="scope">{{getPaymentDetail.charge.is_only==0?'线上':getPaymentDetail.charge.is_only==1 ?'线下' : '暂无数据'}}</template>
            </el-table-column>
            <el-table-column prop="amount_real" label="总金额" align="center"></el-table-column>
            <el-table-column label="支付状态" align="center" v-if="this.$store.state.payment">
                <template slot-scope="scope">
                    <el-button size="mini" :style="getPaymentDetail.charge.state == 0 ? blue : gray" @click="tollSituate(scope.$index, scope.row)">{{getPaymentDetail.charge.state==0?'确认收费':'已收费'}}</el-button>
                    <el-button size="mini" v-if="getPaymentDetail.charge.state != 0" @click="printContent">打印</el-button>
                    <el-button size="mini" v-if="getPaymentDetail.charge.state==1 && getPaymentDetail.charge.is_only==0" @click="onLinePayment">一卡通</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div id="printContent" ref="print">
            <div class="one">收费小票</div>
            <div style="margin-left:5px;margin-top:10px;">姓名:{{tableData[0].name}}</div>
            <div class="tit">*请勿丢失，否则无法领取物资</div>
            <ul class="two">
                <li v-for="(v,ind) in professList" :key="ind">
                    <span>{{v.charge_name}}:</span>
                    <p>{{v.money}}</p>
                </li>
            </ul>
            <li class="countMoney">总计:&yen;{{chargeData.amount_real}}</li>
            <li style="margin-left: 10px;">公寓用品领取地点:北区体育馆，综合楼南门</li>
<!--            <li style="text-align: right;padding: 10px 10px;">军训服领取地点:综合楼一楼侧门</li>-->
            <li class="three" id="qrcode" ref="qrcode"></li>
            <li style="color:red;text-align: center;font-size: 15px;margin-top:10px;">注：凭此二维码领取物资</li>
        </div>
        <p style="font-size: 17px;height: 48px;line-height: 48px;">套餐信息</p>
        <ul class="payment">
            <li>套餐名称：{{tableData[0].classes}}</li>
            <li>学年制：{{tableData[0].professionales_id==3?'专科':'本科'}}</li>
        </ul>
        <section class="paymentSituate" v-if="isPop">
            <h6><span>缴费详情 </span><span @click="clearPop">&times;</span></h6>
            <aside>
                <table class="myTable" v-html="tableList"></table>
                <p class="countMon" style="text-align: right;">总计：<span class="money">&yen;{{chargeData.amount_real}}</span></p>
                <ul class="foot-pay">
                    <li>选择支付方式</li>
                    <li>
                        <el-checkbox-group v-model="checkList" @change="changeCheckList" class="payMoney">
                            <el-checkbox label="0" :disabled="getPaymentDetail.charge.state != 0">
                                <mark>中 国 银 联</mark>
                                <el-input-number v-model="payTypes.state0" :min="0" :disabled="getPaymentDetail.charge.state != 0" controls-position="right" size="small" class="countPas" @change="changeCheckList(0)"></el-input-number>元
                            </el-checkbox>
                            <el-checkbox label="1" :disabled="getPaymentDetail.charge.state != 0">
                                <mark>支付宝支付</mark>
                                <el-input-number v-model="payTypes.state1" :min="0" :disabled="getPaymentDetail.charge.state != 0" controls-position="right" size="small" class="countPas" @change="changeCheckList(1)"></el-input-number>元
                            </el-checkbox>
                            <el-checkbox label="2" :disabled="getPaymentDetail.charge.state != 0">
                                <mark>微 信 支 付</mark>
                                <el-input-number v-model="payTypes.state2" :min="0" :disabled="getPaymentDetail.charge.state != 0" controls-position="right" size="small" class="countPas" @change="changeCheckList(2)"></el-input-number>元
                            </el-checkbox>
                            <el-checkbox label="3" :disabled="getPaymentDetail.charge.state != 0">
                                <mark>现 金 支 付</mark>
                                <el-input-number v-model="payTypes.state3" :min="0" :disabled="getPaymentDetail.charge.state != 0" controls-position="right" size="small" class="countPas" @change="changeCheckList(3)"></el-input-number>元
                            </el-checkbox>
                        </el-checkbox-group>
                        <div class="submit-notice-num" v-if="gongbenPrice">
                            <div style="font-size: 15px;">请输入一卡通卡号</div>
                            <p style="display:inline-flex;"><pre>*</pre>卡号：
                                <el-input v-model="tableData.card_number" placeholder="请输入一卡通卡号" :disabled="getPaymentDetail.charge.state != 0" auto-complete="off"></el-input>
                            </p>
                        </div>
                      <div class="submit-notice-num" v-if="gongbenPrice">
                        <div style="font-size: 15px;">请输入手机号码</div>
                        <p style="display:inline-flex;"><pre>*</pre>手机号：
                        <el-input v-model="tableData.other_phone" placeholder="请输入手机号码" :disabled="getPaymentDetail.charge.state != 0" auto-complete="off"></el-input>
                        </p>
                      </div>
                    </li>
                    <li>
                        <p>应付总额：<span class="money">&yen;{{totalAmount}}</span></p>
                    </li>
                </ul>
            </aside>
            <div>
                <el-button type="success" @click="confirmReceipt">确认收款</el-button>
            </div>
        </section>
        <el-table :data="professList" border style="width: 100%">
            <el-table-column prop="charge_name" label="类目" align="center"></el-table-column>
            <el-table-column prop="money" label="价格" align="center">
                <template slot-scope="scope">
                    <el-input placeholder="价格" v-model="scope.row.money" @change="changepPrice(scope.$index, scope.row)" :disabled="scope.row.state==2||chargeData.state==1?true:false"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="receive_time" label="物品领取时间" align="center"></el-table-column>
            <el-table-column prop="admin_user" label="物品发放人" align="center"></el-table-column>
            <el-table-column label="删除" align="center" fixed="right" v-if="this.$store.state.payment && chargeData.state != 1">
                <template slot-scope="scope">
                    <el-button size="mini" plain @click="packageDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="btn-box" style="margin:25px auto; display: flex;justify-content: center;">
            <el-button @click="goStudentPrice" v-if="this.$store.state.payment && chargeData.state != 1">保存</el-button>
            <el-button @click="goCencal">返回</el-button>
        </div>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    import QRCode from 'qrcodejs2'
    export default {
        data() {
            return {
                qrcodeUrl: '',
                isPop: false,
                tableData: [],
                professList: [],
                chargeData: {},
                professName: '套餐名称',
                years: '学年制',
                tableList: '',
                radio: '1',
                pay_type: {
                    0: '银联',
                    1: '支付宝',
                    2: '微信',
                    3: '现金'
                },
                state: {
                    0: '未支付',
                    1: '支付成功',
                    2: '支付失败',
                    3: '取消支付'
                },
                studentPayment: {
                    pay_type: '',
                    is_only: '1',
                    amount_real: '',
                    students_id: '',
                    extension: '青出于蓝而胜于蓝'
                },
                getPaymentDetail: {},
                gray: {
                    background: '#ebeef5'
                },
                blue: {
                    background: 'rgb(0, 182, 255)',
                    color: '#ffffff'
                },
                td: {
                    height: '35px',
                    border: '1px solid# ddd',
                    padding: '5px 0'
                },
                saveStuPrice: [],
                checkList: [], // 支付选中状态
                totalAmount: 0, //总金额
                payTypes: {
                    state0: 0,
                    state1: 0,
                    state2: 0,
                    state3: 0
                },
                status: '',
                gongbenPrice: false
            }
        },
        components: {
            QRCode
        },
        created() {
            this.status = this.$route.query.status;
            this.gongbenPrice = false;
        },
        beforeMount() {
            var self = this;
            self.getTableData();
        },
        mounted() {
            var self = this;
            self.defData();
            self.$nextTick(function() {
                document.getElementById('qrcode').innerHTML = '';
                self.qrcode();
            })
        },
        methods: {
            /* 返回上一次操作 */
            goCencal() {
                this.$router.push({
                    path: '/index',
                    query: {
                        status: this.status
                    }
                });
            },
            /* 数组判断 */
            isArr(arr) {
                return Object.prototype.toString.call(arr) === '[object Array]'
            },
            isNum(inputData) {
                if(parseFloat(inputData).toString() == 'NaN') return false;
                else return true;
            },
            /* 初始化数据 */
            defData() {
                var self = this;
                self.checkList = [];
                self.totalAmount = 0;
                self.payTypes = {
                    state0: 0,
                    state1: 0, //self.chargeData.amount_real,
                    state2: 0,
                    state3: 0
                }
            },
            /* 获得表格数据 */
            getTableData() {
                var self = this;
                self.getPaymentDetail = this.$store.state.paymentData;
                self.changePage(self.getPaymentDetail);
            },
            /* 价格编辑 */
            changepPrice(inde, res) {
                var self = this;
                if(self.saveStuPrice.length < 1) {
                    self.saveStuPrice = [{
                        id: res.id,
                        money: res.money
                    }];
                } else {
                    let stat = true;
                    self.saveStuPrice.filter(v => {
                        if(v.id == res.id) {
                            stat = false;
                            return v.money = res.money;
                        }
                    })
                    if(stat) {
                        self.saveStuPrice.push({
                            id: res.id,
                            money: res.money
                        });
                    }
                }
            },
            /* 更新 */
            updateOnlineTable(id) {
                var self = this;
                var params = {
                    id: id
                };
                apis.contApi.paymentdetail(params).then((res) => {
                    self.$store.state.isPard = res.data.data.charge.state;
                    this.$store.commit('changePayment', res.data.data);
                    self.getTableData();
                }).catch((error) => {
                    console.error(error);
                });
            },
            /* 保存价格 */
            goStudentPrice() {
                var self = this;
                apis.contApi.modifyStudentPrice(self.saveStuPrice).then(res => {
                    self.$message(res.data.msg);

                    if(res.data.code == 0) {
                        self.handleDetail(self.getPaymentDetail.charge);
                    }
                }).catch(error => {
                    console.error(error);
                })
            },
            /* 默认加载套餐列表 */
            changePage(result) {
                var self = this;
                result.student.amount_real = result.charge.amount_real;
                result.student.pay_type = result.charge.pay_type;
                result.student.state = result.charge.state;
                self.$store.state.isPard = result.charge.state;
                self.chargeData = result.charge;

                var infoHtml = '暂无数据';
                if(result.charge.extension.length) {
                    let info = JSON.parse(result.charge.extension);
                    if(info.length) {
                        infoHtml = '';
                        for(var i = 0; i < info.length; i++) {
                            infoHtml += info[i].name + info[i].money + '元' + '\r\n';
                        }
                    }
                }
                result.student.payTypeInfo = infoHtml;

                self.tableData = [result.student];
                self.professList = result.pay_items;
                self.professList.map(v => {
                    if(v.charge_name == '一卡通工本费') {
                        self.gongbenPrice = true;
                    }
                });
                self.tableList = '<tr><td style="height:35px;border:1px solid #ddd;padding:5px 0;background:#eee;">名称</td>' + self.professList.map(v => `<td style='height:35px;border:1px solid #ddd;padding:5px 0;'>${v.charge_name}</td>`).join('') +
                    '</tr><tr><td style="height:35px;border:1px solid #ddd;padding:5px 0;background:#eee;">单价（元）</td>' + self.professList.map(v => `<td style='height:35px;border:1px solid #ddd;padding:5px 0;'>${v.money}</td>`).join('') + '</tr>';
            },
            /* 删除套餐记录 */
            packageDel(index, rowData) {
                var self = this;
                if(rowData.state == 2 || self.chargeData.state == 1) {
                    self.$message('该物资已交费');
                    return false;
                }
                var params = {
                    id: rowData.id
                }
                apis.contApi.delepayment(params).then(res => {
                    self.$message(res.data.msg);
                    if(res.data.code == 0) {
                        self.handleDetail(self.chargeData);
                    }
                }).catch(error => {
                    console.error(error);
                })
            },
            /** 打开详情页 */
            handleDetail(rowData) {
                var self = this;
                var params = {
                    id: rowData.id
                };
                apis.contApi.paymentdetail(params).then((data) => {
                    this.$store.commit('changePayment', data.data.data);

                    self.getTableData();
                }).catch((error) => {
                    console.error(error);
                });
            },
            /* 收费情况 */
            tollSituate(inde, rowData) {
                var self = this;
                if(this.$store.state.isPard == 1) {
                    self.$message('已收费');
                } else {
                    self.$message('准备确认收费');
                    self.isPop = true;
                    self.changeCheckList(self.checkList);
                }
            },
            /* 收款打印 */
            printContent() {
                this.$print(this.$refs.print); //$refs的值要和html里的ref一致
            },
            /* 线上缴费一卡通 */
            onLinePayment() {
                var self = this;
                this.$prompt('请输入一卡通卡号', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showConfirmButton: self.tableData[0].card_number ? false : true,
                    inputValue: self.tableData[0].card_number,
                    inputPattern: /^([1-9][0-9]*){1,3}$/,
                    inputErrorMessage: '请输入正确卡号'
                }).then(({
                    value
                }) => {
                    let params = {
                        student_id: self.chargeData.students_id,
                        card_number: value
                    }
                    apis.contApi.setcardNumber(params).then((res) => {
                        if(res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            self.updateOnlineTable(self.getPaymentDetail.charge.id);
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    }).catch((error) => {
                        console.error(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            /* 生成二维码 */
            qrcode() {
                let qrcode = new QRCode('qrcode', {
                    width: 100, // 设置宽度
                    height: 100, // 设置高度
                    text: this.tableData[0].notice_number
                })
            },
            /* 关闭弹窗 */
            clearPop() {
                var self = this;
                self.isPop = false;
            },
            /* 确认收款 */
            confirmReceipt() {
                var self = this;
                let money = self.checkList;
                let submitMoneyList = [];
                money.map((v, j) => {
                    let l = {};
                    l.type = v;
                    l.money = self.payTypes['state' + v];
                    l.name = v == 0 ? '中国银联' : v == 1 ? '支付宝支付' : v == 2 ? '微信支付' : v == 3 ? '现金支付' : '';
                    submitMoneyList.push(l);
                });
                // 判断一卡通号码 是否存在
                if(self.gongbenPrice) {
                    if(!self.tableData.card_number) {
                        self.$message('请输入一卡通号码！');
                        return false;
                    } else if(!self.isNum(Number(self.tableData.card_number))) {
                        self.$message('请输入正确的一卡通号码！');
                        return false;
                    }
                    var m = {
                        card_number: self.tableData.card_number,
                        other_phone:self.tableData.other_phone
                    }
                    submitMoneyList.push(m);
                }

                apis.contApi.studentPayStatus(self.chargeData.students_id, submitMoneyList).then(res => {
                    if(res.data.code == 0) {
                        self.clearPop();
                        self.handleDetail(this.chargeData);
                    } else {
                        this.$message(res.data.msg);
                    }
                })
            },
            /* 价格改变、支付方式改变 */
            changeCheckList(num) {
                var self = this;
                let moneys = 0;
                for(let i of self.checkList) {
                    if(self.isNum(self.payTypes['state' + i])) {
                        if(self.payTypes['state' + i] < 0) {
                            self.payTypes['state' + i] = Math.abs(self.payTypes['state' + i]);
                        }
                        moneys += Number(self.payTypes['state' + i]);
                        continue
                    } else {
                        self.payTypes['state' + i] = 0;
                        this.$message('金额不对，请核对');
                        break
                    }
                }

                if(moneys > self.chargeData.amount_real) {

                    if(self.isArr(num)) {
                        num = num.slice(-1).toString();
                    }
                    self.payTypes['state' + num] = 0;
                    moneys = 0;
                    self.checkList.map(v => {
                        moneys += Number(self.payTypes['state' + v]);
                    })
                }
                self.totalAmount = moneys;
            }
        }
    }
</script>

<style scoped>
    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .payment-Detail {
        width: 100%;
        border-collapse: collapse;
        height: 79px;
    }

    .payment-Detail tr:nth-child(1) {
        background: #dbdbdb;
    }

    .payment-Detail th,
    .payment-Detail td {
        border: 1px solid #000;
    }

    .profess-List {
        width: 100%;
        border-collapse: collapse;
    }

    .profess-List th,
    .profess-List td {
        border: 1px solid #000;
    }

    .payment {
        width: 100%;
        height: 62px;
        background: #5e87b0;
        border-radius: 5px;
    }

    .payment li {
        float: left;
        font-size: 17px;
        padding: 20px;
        color: white;
    }

    .paymentSituate {
        position: fixed;
        transform: translate(-50%, -50%);
        width: 600px;
        top: 50%;
        left: 50%;
        background: #fff;
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        box-shadow: inset 0 0 10px 1px #ddd;
        border-radius: 5px;
        overflow: hidden;
    }

    .paymentSituate>h6 {
        width: calc(100% - 17px);
        height: 45px;
        line-height: 45px;
        background-color: #5e87b0;
        padding: 0 2px 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: 16px;
    }

    .paymentSituate>h6>span:last-of-type {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 42px;
        font-size: 35px;
        font-weight: 100;
        border-radius: 3px;
        cursor: pointer;
    }

    .paymentSituate>h6>span:last-of-type:hover {
        background-color: #7395b7;
    }

    .paymentSituate>aside {
        width: calc(100% - 30px);
        padding: 15px;
        height: 100%;
    }

    .paymentSituate>aside .myTable {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .paymentSituate>aside .foot-pay {
        padding: 0;
    }

    .paymentSituate>aside .foot-pay li {
        line-height: 35px;
    }

    .paymentSituate>aside .foot-pay li:nth-child(3) {
        margin: 0 -20px -13px;
        padding: 0 20px;
        text-align: right;
        background-color: #e5e5e5;
    }

    .paymentSituate>aside .foot-pay li:nth-child(2) {
        display: inline-flex;
        flex-direction: column;
        padding: 0;
    }

    .paymentSituate>aside .foot-pay li:nth-child(2) .payMoney {
        display: inline-flex;
        flex-direction: column;
        padding: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .paymentSituate>aside .foot-pay li:nth-child(2) label {
        line-height: 30px;
        margin-left: 15px;
        padding: 3px 0;
    }

    .paymentSituate>aside .foot-pay li:nth-child(3) span.money {
        color: #ff1919;
        font-size: 18px;
    }

    .paymentSituate>aside .foot-pay li:nth-child(4) {
        text-align: right;
    }

    .paymentSituate>aside .foot-pay .countPas {
        margin-right: 3px;
    }

    .paymentSituate>aside .foot-pay mark {
        display: inline-block;
        background: none;
        width: 80px;
    }

    .paymentSituate>aside p.countMon {
        text-align: right;
        font-size: 17px;
        height: 48px;
        line-height: 48px;
        border: 1px solid #ddd;
        border-top: none;
    }

    .paymentSituate>aside p span.money {
        padding: 0 5px 0 2px;
        color: #ff1919;
        font-size: 18px;
    }

    .submit-notice-num {
        margin: 0 0 15px 0;
    }

    .submit-notice-num p {
        display: inline-flex;
        white-space: nowrap;
        margin: 0 0 0 22px;
        align-items: center;
    }

    .submit-notice-num p pre {
        color: #FF0000;
    }

    .paymentSituate>div {
        height: 75px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e5e5e5;
    }

    .paymentSituate>div button {
        background: #5e87b0;
        width: 100px;
        height: 38px;
        color: #fff;
        border: 1px solid #5e87b0;
    }

    #printContent {
        position: absolute;
        left: 0;
        right: 0;
        border: 1px solid #8C939D;
        font-size: 0.1rem;
        padding: 5px 0 20px 0;
        z-index: -99;
    }

    #printContent>.one {
        font-size: 19px;
        text-align: center;
        border-bottom: 1px solid #c4c4c4;
        height: 42px;
        line-height: 48px;
    }

    #printContent>.tit {
        font-size: 13px;
        text-align: center;
        line-height: 35px;
        height: 30px;
    }

    #printContent>.two>li {
        padding: 0 5px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }

    #printContent>.countMoney {
        text-align: right;
        color: #f00;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 15px;
        font-weight: bold;
    }

    #printContent>.two>li>span {
        flex: 1;
        text-align: left;
    }

    #printContent>.two>li>p {
        text-align: right;
    }

    #printContent>.three {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
</style>
